<template>
  <div class="register">
    <headerCommod class="head"/>
    <div class="logo to-right">
      <img src="../assets/images/logo.png" alt="">
    </div>
    <div class="form to-top">
      <h1>欢迎注册Forest Shipping</h1>
      <form action="">
        <div class="form-item">
          <input class="input" placeholder="用户名" type="text">
        </div>
        <div class="form-item">
          <input class="input" placeholder="手机号/邮箱" type="text">
        </div>
        <div class="code">
          <div class="form-item">
            <input class="input" placeholder="请输入验证码" type="text">
          </div>
          <el-button class="button">发送验证码</el-button>
        </div>
        <div class="form-item">
          <input class="input" placeholder="密码" type="text">
        </div>
        <div class="form-item">
          <input class="input" placeholder="确认密码" type="text">
        </div>
        <div class="form-item">
          <input class="input" placeholder="邀请码" type="text">
        </div>
        <el-button class="submit">立即注册</el-button>
      </form>
    </div>
  </div>
</template>

<script>
import headerCommod from '../components/Head'
export default {
  name: 'register',
  components: {
    headerCommod
  }
}
</script>

<style scoped>
  .register {
    background: url("../assets/images/register.jpg") no-repeat center center;
    height: 100vh;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 1000px;
    min-height: 800px;
  }

  .register h1 {
    text-align: center;
  }

  .logo {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 150px;
  }

  .logo img {
    max-width: 100%;
  }

  .form {
    position: absolute;
    width: 30%;
    max-width: 450px;
    min-width: 400px;
    color: #fff;
    margin-top: -90px;
  }

  input:focus {
    border: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }

  .code .form-item {
    width: calc(100% - 112px);
    float: left;
  }

  .code .button {
    margin-top: 30px;
    color: #1a632c;
  }

  .form-item {
    height: 50px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    margin-top: 20px;
  }


  .form-item input {
    width: 100%;
    line-height: 50px;
    background: none;
    border: none;
    color: #fff;
  }

  .submit {
    width: 100%;
    margin-top: 60px;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .submit:hover {
    color: #1a632c;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(255, 255, 255, 1);
  }

  .head {
    visibility: hidden;
    position: absolute;
    z-index: -9;
  }

  *:focus { outline: none; }

  input::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #fff;
  }
  input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #fff;
  }
  input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #fff;
  }
  input:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #fff;
  }
</style>
